﻿@using JinRi.WebHost.ViewModels
@{
    ViewBag.Title = "在线观看";
    var items = ViewBag.Videos as List<VideoModel>;
    var first = items == null ? null : items.FirstOrDefault();
}
<div class="banner">
    <img src="~/Images/video-banner.png" />
</div>

<div class="container clearfix">
    <h2 class="title">今日动画片体验馆</h2>
    <div class="hr"></div>
    <div class="player">
        @if (first != null && !string.IsNullOrEmpty(first.Url))
        {
            <embed src="@first.Url" allowfullscreen="true" quality="high" width="800" height="430" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash"/>
        }
        
    </div>
    <div class="hr"></div>
    <ul class="video-list clearfix">
        @foreach (var item in items)
        {
            <li class="space" data-url="@item.Url">
                <img src="@Url.Action("Get", "Image", new { id = item.CoverImageId })" />
                <img class="play-icon" src="~/Images/video-play-icon.png" />
                <h3>@item.Title</h3>
            </li>
        }
    </ul>
    <div class="hr"></div>
</div>


@section scripts
{
    <script>
        $(function() {
            $('.video-list').on('click', '.space', function () {
                var url = $(this).data('url');

                $('.player').html('<embed id="flash" src="' + url + '" allowfullscreen="true" quality="high" width="800" height="430" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash"/>');
            });

        });
    </script>
}
